<template>
  <div v-loading="loading" class="app-container">
    <div class="filter-container" />
      <el-row :gutter="20">
        <el-col :span="12">
          <div
          style="background-color: #409EFF;"
          class="grid-content bg-purple back">
            <h3>
              主程序：
            </h3>
            <hr />
            <el-row :gutter="20" style="margin-top: 1rem;">
              <el-col :span="3" style="line-height: 36px;">
                appid：
              </el-col>
              <el-col :span="21">
                <el-input
                @change="handleChange(item)"
                v-for="(item,index) in tableData"
                v-if="tableData&&item.key=='wx_appid_man'"
                v-model="item.value" />


              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="3" style="line-height: 36px;">
                secret：
              </el-col>
              <el-col :span="21">
                <el-input
                @change="handleChange(item)"
                v-for="(item,index) in tableData"
                v-if="tableData&&item.key=='wx_secret_man'"
                v-model="item.value" />
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="12" >
          <div
          style="background-color: limegreen;"
          class="grid-content bg-purple back">
            <h3>
              支付程序：
            </h3>
            <hr />
            <el-row :gutter="20" style="margin-top: 1rem;">
              <el-col  :span="3" style="line-height: 36px;">
                appid：
              </el-col>
              <el-col :span="21">
                <el-input
                @change="handleChange(item)"
                v-for="(item,index) in tableData"
                v-if="tableData&&item.key=='wx_appid_pay'"
                v-model="item.value" />
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="3" style="line-height: 36px;">
                secret：
              </el-col>
              <el-col :span="21">
                <el-input
                @change="handleChange(item)"
                v-for="(item,index) in tableData"
                v-if="tableData&&item.key=='wx_secret_pay'"
                v-model="item.value" />
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>

      <el-row style="margin-bottom: -1rem;" :gutter="20">
        <el-col :span="5">
          <h3 class="hei">
            logo:
          </h3>
        </el-col>
        <el-col :span="19">
          <h3 class="hei">
            商户信息:
          </h3>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">
          <div class="grid-content bg-purple" style="text-align: center;">
            <el-upload
             @change="handleChange(item)"
             v-for="(item,index) in tableData"
             v-if="tableData&&item.key=='logo'"
             class="avatar-uploader"
             :action="lujing"
             :show-file-list="false"
             :on-success="logo_handleSuccess">
              <img v-if="item.value" :src="item.value" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </div>
        </el-col>
        <el-col :span="19">
          <div class="grid-content bg-purple" style="height: 215px;">
            <el-row :gutter="20" style="margin-top: 2.5rem;">
              <el-col :span="3" style="line-height: 36px;">
                商户key：
              </el-col>
              <el-col :span="21">
                <el-input
                @change="handleChange(item)"
                v-for="(item,index) in tableData"
                v-if="tableData&&item.key=='mch_key'"
                v-model="item.value" />
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="3" style="line-height: 36px;">
                商户号id：
              </el-col>
              <el-col :span="21">
                <el-input
                @change="handleChange(item)"
                v-for="(item,index) in tableData"
                v-if="tableData&&item.key=='mch_id'"
                v-model="item.value" />
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="20">
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      </el-row> -->

      <el-collapse v-model="activeNames">
        <el-collapse-item title="全部操作" name="1">
          <!-- 列表主体 -->
            <el-table v-if="tableData" :data="tableData" border fit highlight-current-row style="width: 100%;"
              @sort-change="sortChange">
              <!--  -->
              <el-table-column label="项目" align="left" min-width="200px">
                <template slot-scope="{row}">
                  <span>{{ row.msg }}</span>
                </template>
              </el-table-column>
              <el-table-column label="记录值" prop="id" align="center" min-width="400px">
                <template slot-scope="{row}">
                  <!-- 后台过期时间 -->
                  <div v-if="row.key==&quot;admin_token_die_tmie&quot;">
                    <el-input-number
                    @change="handleChange(row)"
                    v-model="row.value" :min="0" />
                  </div>

                  <!-- 版本 -->

                  <div v-else-if="row.key==&quot;edition&quot;">

                    <el-select
                      @change="handleChange(row)"
                      v-model="row.value"
                      placeholder="请选择">
                        <el-option
                          key="0"
                          label="开发版"
                          value="0">
                        </el-option>
                        <el-option
                          key="1"
                          label="线上版"
                          value="1">
                        </el-option>
                    </el-select>
                  </div>

                  <!-- //头像-->
                  <div v-else-if="row.key==&quot;logo&quot;">
                    <el-upload
                     @change="handleChange(row)"
                     class="avatar-uploader"
                     :action="lujing"
                     :show-file-list="false"
                     :on-success="logo_handleSuccess">
                      <img v-if="row.value" :src="row.value" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon" />
                    </el-upload>

                  </div>
                  <!-- 首页使用的banner -->
                  <div v-else-if="row.key==&quot;index_image&quot;">
                    <el-upload
                     @change="handleChange(row)"
                     class="avatar-uploader"
                     :action="lujing"
                     :show-file-list="false"
                     :on-success="banner_handleSuccess">
                      <img v-if="row.value" :src="row.value" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon" />
                    </el-upload>

                  </div>

                  <div v-else>
                    <el-input v-model="row.value" @change="handleChange(row)"  placeholder="请输入内容" />
                  </div>
                </template>
              </el-table-column>
              <!-- <el-table-column label="操作" align="center" width="150px">
                <template slot-scope="{row}">
                  <el-button type="primary" @click="handleChange(row)">保存</el-button>
                </template>
              </el-table-column> -->
            </el-table>


        </el-collapse-item>

      </el-collapse>
  </div>
</template>

<script>
  // 引入api
  import api from '@/api/system/message.js'
  import Tinymce from '@/components/Tinymce'
  // 引入分页
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination

  export default {
    components: { Pagination, Tinymce },
    data() {
      return {
        // 分页
        total: 0,
        pagesizes: [10, 30, 60, 100],
        // 数据
        tableData: null,
        // 提交数据
        temp: {

        },
        // 应有数据
        temp_: {

        },
        // 判定加载
        loading: false,
        // 判定where
        listQuery: {
          page: 1,
          limit: 10,
          title: null,
          sort: 'asc'
        },
        // 判定显示
        dialogFormVisible: false,
        // 判定修改or添加
        dialogStatus: '',
        // 判定修改id
        up_id: 0,
        // 列表匹配数据群
        textMap: {
          update: '修改',
          create: '添加'
        },
        affix2: [
          {
            value: 0,
            label: '保留'
          },
          {
            value: 1,
            label: '不保留'
          }
        ],
        show: [
          {
            value: 0,
            label: '展示'
          },
          {
            value: 1,
            label: '不展示'
          }
        ],
        lujing: JSON.parse(localStorage.getItem('Config'))['image_update']['value'],
        sortOptions: [
          { label: 'ID 升序', key: 'asc' },
          { label: 'ID 降序', key: 'desc' }
        ],
        activeNames: ['0']
      }
    },
    // watch: {
    //   'tableData': {
    //     handler(newVal, oldVal) {
    //       for (var i = 0; i < this.tableData.length; i++) {
    //         if (this.tableData[i]['key'] == 'introduction') {
    //           this.handleChange(this.tableData[i])
    //           break
    //         }
    //       }
    //     },
    //     deep: true
    //   }
    // },
    // 进入页面加载数据
    created() {
      this.list()
    },
    methods: {
      banner_handleSuccess(response, file){
        for (var i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i]['key'] == 'index_image') {
            this.tableData[i]['value'] = response.data
            //this.handleChange(this.tableData[i])
            break
          }
        }
        this.temp.index_image = response.data
        console.log(this.temp)
        this.handleChange({
          key:'index_image',
          value:this.temp.index_image
        })
      },
      logo_handleSuccess(response, file) {
        for (var i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i]['key'] == 'logo') {
            this.tableData[i]['value'] = response.data
            //this.handleChange(this.tableData[i])
            break
          }
        }
        this.temp.logo = response.data
      },
      handleChange(row) {
        console.log(row)
        this.loading = true
        api.save({
          key: row.key,
          value: row.value
        }).then(() => {
          this.loading = false
          this.$message({
            message: '保存成功',
            type: 'success'
          });
        })
        return
      },

      // 删除
      handleDelete(row, index, id) {
        this.$confirm('此操作将永久删除该路由, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          api.del({

            id: id
          }).then(() => {
            // this.list.unshift(this.temp)
            this.loading = false
            this.list()
            this.dialogFormVisible = false
            this.$notify({
              title: '提示',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 修改
      updateData() {
        this.loading = true
        var than = this
        console.log(this.temp)
        api.update({

          id: this.up_id,
          temp: this.temp
        }).then(res => {
          this.list()
          this.dialogFormVisible = false
          this.$message.success('修改成功')
          // router.addRoutes(res)
        }).catch((res) => {
          console.log('22222')
          than.loading = false

        })
      },
      // 添加
      createData() {
        this.loading = true
        var than = this
        console.log(this.temp)
        api.save({

          temp: this.temp
        }).then(res => {
          this.list()
          this.dialogFormVisible = false
          this.$message.success('添加成功')
          // router.addRoutes(res)
        }).catch((res) => {
          console.log('22222')
          than.loading = false
        })
      },
      // 还原提交数据
      resetTemp() {
        for (var key in this.temp) {
          delete this.temp[key]
        }
      },
      // 添加前钩子
      handleCreate(pid) {
        this.resetTemp(pid)
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      // 修改前钩子
      handleUpdate(row) {
        this.up_id = row.key
        this.temp = Object.assign({}, row) // copy obj
        console.log(this.temp)
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      // 获取列表
      list(title) {
        this.loading = true
        var than = this

        api.list({

          listQuery: this.listQuery
        }).then(res => {
          than.tableData = res.data.list
          than.total = res.data.count

          than.loading = false
          // router.addRoutes(res)
        }).catch((res) => {
          console.log('22222')
          than.loading = false
        })
      },
      // 排序
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'id') {
          this.sortByID(order)
        }
      },
      sortByID(order) {
        if (order === 'ascending') {
          this.listQuery.sort = 'asc'
        } else {
          this.listQuery.sort = 'desc'
        }
        this.handleFilter()
      },
      // 还原数据
      handleFilter() {
        this.listQuery.page = 1
        this.list()
      }

    }

  }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
    }
    .bg-purple-dark {
       box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

    }
    .bg-purple {
       box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }
    .bg-purple-light {
       box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
      padding: 1rem;
    }
    .row-bg {
      padding: 10px 0;
       box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }
    .back{
      color: #fff;
    }
    .hei{
      color: #000;
    }
</style>
